<template>
    <div class="platform">
        <my-tag :title="title" :showSortImg="false"></my-tag>
        <div class="platform-box">
            <el-form ref="formRef" :model="form" :rules="rules" label-position="top" label-width="auto"
                class="demo-ruleForm platform-formList">
                <div class="form-left">
                    <el-form-item label="材料商名称" prop="materialSupplierName">
                        <el-input v-model="form.materialSupplierName" placeholder="请输入材料商名称"
                            @focus="materialSupplierNameLimit = true" @blur="materialSupplierNameLimit = false"
                            :show-word-limit="materialSupplierNameLimit" maxlength="20" />
                    </el-form-item>
                    <el-form-item label="联系电话" prop="phonenumber">
                        <el-input v-model="form.phonenumber" placeholder="请输入联系电话" />
                    </el-form-item>
                    <el-form-item label="线下地址" prop="address">
                        <el-input type="textarea" v-model="form.address" @focus="addressLimit = true"
                            @blur="addressLimit = false" :show-word-limit="addressLimit" placeholder="请输入地址"
                            maxlength="50" />
                    </el-form-item>
                    <el-form-item label="材料商介绍" prop="materialSupplierDoc">
                        <el-input type="textarea" :autosize="{ minRows: 5 }" v-model="form.materialSupplierDoc"
                            placeholder="请输入简介" @focus="introduceLimit = true" @blur="introduceLimit = false"
                            :show-word-limit="introduceLimit" maxlength="500" />
                    </el-form-item>
                </div>
                <div class="form-right">
                    <el-form-item label="头像" prop="avatar">
                        <image-upload v-model="form.avatar" :limit="1"></image-upload>
                    </el-form-item>
                    <el-form-item label="品牌形象照" prop="profilePicture">
                        <image-upload v-model="form.profilePicture" :limit="1"></image-upload>
                    </el-form-item>
                    <el-form-item label="营业执照" prop="businessLicense">
                        <image-upload v-model="form.businessLicense" :limit="2"></image-upload>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="platform-submit-btn">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button class="default-btn" @click="goBack">返回</el-button>
        </div>
    </div>
</template>
<script setup>
import { getMaterialAuthentication, updateMaterialAuthentication, addMaterialAuthentication } from "@/api/decor/materialSupplier";
const router = useRouter();
const route = useRoute();
const title = ref('')
const introduceLimit = ref(false)
const materialSupplierNameLimit = ref(false)
const addressLimit = ref(false)
const { proxy } = getCurrentInstance();
const data = reactive({
    form: {},
    rules: {
        materialSupplierName: [{ required: true, message: "请输入材料商名称", trigger: "blur" }],
        address: [{ required: true, message: "请输入线下地址", trigger: "blur" }],
        avatar: [{ required: true, message: "请上传材料商头像", trigger: "blur" }],
        profilePicture: [{ required: true, message: "请上传材料商品牌形象照", trigger: "blur" }],
        businessLicense: [{ required: true, message: "请上传材料商营业执照", trigger: "blur" }],
        phonenumber: [
            { required: true, message: "联系电话不能为空", trigger: "blur" },
            {
                pattern: /^1[3|4|5|6|7|8|9]\d{9}$/,
                message: "请输入正确的联系电话",
                trigger: "change",
            }
        ]
    }
});
const { form, rules } = toRefs(data);
// 获取信息
const getListData = () => {
    const origin = route.params.origin
    title.value = origin === 'editMaterialCom' ? '材料商信息修改' : '材料商认证'
    if (origin === 'editMaterialCom') {
        getMaterialAuthentication().then((res) => {
            form.value = res
        })
    }
}
getListData()
// 提交按钮
const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            form.value.msHairstyle = '1'
            if (route.params.origin === 'authentication') {
                addMaterialAuthentication(form.value).then(response => {
                    proxy.$modal.msgSuccess("提交成功，请等待管理员审核");
                    router.push('/authentication')
                });
            } else {
                proxy.$modal.confirm('是否确认提交，确定后需等待管理员再次审核').then(function () {
                    return updateMaterialAuthentication(form.value);
                }).then(() => {
                    proxy.$modal.msgSuccess("修改成功，请等待管理员审核");
                    router.go(-1)
                }).catch(() => { });
            }

        } else {
            proxy.$modal.msgError('请根据提示完善必填信息')
        }
    });
}
// 返回按钮
const goBack = () => {
    router.go(-1)
}
</script>